<template>
    <div class="LiveD">
        <h3>直播课程</h3>
        <ul class="liveUl">
            <li v-for='(item,index) in liveList' @mouseenter='change(index)' :key='index' :class='{"action":index==indexs}'><a-icon type="check-circle" /><span>直播结束</span>{{item.course.courseTitle}}</li>
        </ul>
        <ul class="liveul"  v-for='(item,index) in liveList' v-show="index == indexs" :key='index'>
            <li><img :src="item.course.coverFileUrl" alt=""></li>
            <li class="liveuli"><h3>{{item.course.courseTitle}}</h3><div><a-icon type="check-circle" /><span>直播结束</span></div>
                <a-config-provider :auto-insert-space-in-button="false">
                    <a-button type="primary">
                        直播结束
                    </a-button>
                </a-config-provider>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Live",
        data(){
            return{
                liveList:[],
                Livelist:[],
                indexs:0
            }
        },
        created() {
            this.$axios.post('http://wkt.myhope365.com//pc/liveCourseInfo/list').then(res => {
                console.log(res.data.rows)
                this.liveList = res.data.rows

            });
        },
        methods:{
            change(index){
                this.indexs = index
            }
        }
    }
</script>

<style scoped lang="less">
    *{
        box-sizing: border-box;
    }
    .action{
            color: #42b983;
            border-left: 4px solid #42b983;
            background-color: white;
    }
    .LiveD{
        position: relative;
        margin-top: 30px;
        overflow: hidden;
     padding: 0px 160px;
        h3 {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
        .liveUl {
            background-color: #F4F4F4;
            font-size: 16px;
            color: black;
            width: 50%;
            height: 350px;
            float: right;
            li {
                height: 50px;
                line-height: 50px;
                padding-left: 30px;
            }
            /*li:hover {*/
            /*    color: #42b983;*/
            /*    border-left: 4px solid #42b983;*/
            /*    background-color: white;*/
            /*}*/
            span {
                margin: 0px 24px;
            }
        }
        .liveul{
            width: 50%;
            float: left;
            img {
                width: 100%;
                height: 350px;
            }
             /deep/.liveuli{
                 text-align: center;
                 color: white;
                 z-index: 123;
                 top: 49px;
                position: absolute;
                width: 39.5%;
                height: 350px;
                background-color: rgba(0,0,0,0.6) ;
                 h3 {
                     color: white;
                     font-weight: normal;
                     margin-top: 100px;
                 }
                 div{
                     margin: 30px;
                     font-size: 18px;
                 }
                 button {
                 width: 180px;
                 height: 50px;
             }
            }
        }
    }

</style>